<template>
	<view class="ikz">
		<ikz-loading :css-data="loading_css"></ikz-loading>
		<view class="ikz-drawal">
			<view class="ikz-drawal-top"
				:style="'background-image: url('+adminFontPath+'/assets/addons/xyb/img/bg.png);background-repeat:no-repeat;background-size:100% 250rpx;'">
				<view class="ikz-drawal-top-title">
					我的余额
				</view>
				<view class="ikz-drawal-top-tips">
					<view class="ikz-drawal-top-price">
						￥{{total_price||0}}
					</view>
					<view class="ikz-drawal-top-detailed" @click="goLog">
						提现明细
					</view>
				</view>
			</view>
			<view class="ikz-drawal-top-bottom"></view>
			<view class="ikz-drawal-center">
				<!-- <radio-group @change="moneyselect"> -->
					<view class="ikz-drawal-title">
						提现方式
					</view>
					<view class="ikz-drawal-option"  style="display: flex;align-items: center;" v-if="withdrawal_pay_method == 3">
							<image src="/static/zfb.png" mode="aspectFit" style="width: 56rpx;height: 56rpx;"></image>
							<view style="margin-left: 20rpx;flex: 1;">支付宝提现</view>
							<view>
								<radio value="wx"  checked="true"/>
							</view>
					</view>
					<view v-if="withdrawal_pay_method == 3" style="padding-top: 16rpx;">
						<view>支付宝收款码</view>
						<view style="padding-top: 36rpx;">
							<image :src="code_image" style="width: 280rpx;height: 280rpx;" mode="aspectFit"></image>
						</view>
					</view>
					<view class="ikz-drawal-option"  style="display: flex;align-items: center;" v-if="withdrawal_pay_method == 2">
							<image src="/static/wx.png" mode="aspectFit" style="width: 56rpx;height: 56rpx;"></image>
							<view style="margin-left: 20rpx;flex: 1;">微信提现</view>
							<view>
								<radio value="wx"  checked="true"/>
							</view>
					</view>
					<view v-if="withdrawal_pay_method == 2" style="padding-top: 16rpx;">
						<view>微信收款码</view>
						<view style="padding-top: 36rpx;">
							<image :src="code_image" style="width: 280rpx;height: 280rpx;" mode="aspectFit"></image>
						</view>
					</view>
					<view class="ikz-drawal-option"  style="display: flex;align-items: center;" v-if="withdrawal_pay_method == 1">
							<image src="/static/yl.png" mode="aspectFit" style="width: 56rpx;height: 56rpx;"></image>
							<view style="margin-left: 20rpx;flex: 1;">银行卡提现</view>
							<view>
								<radio value="yl"  checked="true"/>
							</view>
					</view>
					<view class="ikz-drawal-btns" @click="addCard" v-if="!bankcardlist.cardNo && withdrawal_pay_method == 1">
						+添加银行卡
					</view>
					<view class="ikz-drawal-texts card-list" v-if="bankcardlist.cardNo && withdrawal_pay_method == 1">
						<view style="padding: 32rpx 0;">
							<view class="bankcardcontent"> {{bankcardlist.openBankNm}} {{bankcardlist.name}}</view>
							<view class="bankcardcardNo"> {{bankcardlist.cardNo}} </view>
						</view>
						<view class="bankcardchange" @click="updateCard"> 更改银行卡 </view>
					</view>
				<!-- </radio-group> -->
				<view class="ikz-drawal-title">
					提现金额
				</view>
				<view class="ikz-drawal-option">
					<view class="ikz-drawal-option-icon">
						￥
					</view>
					<input class="ikz-drawal-option-input" v-model="amount" @blur="submitStatuss"
						:placeholder="'最低提现金额'+min_withdrawal_amount+'元'" />
					<view class="ikz-drawal-option-all" @click="allInput">
						全部提现
					</view>
				</view>
				<view class="ikz-drawal-title">
					到账金额
				</view>
				<view class="ikz-drawal-options">
					<view class="ikz-drawal-option-icon">
						￥
					</view>
					<input class="ikz-drawal-option-inputs" v-model="amount_other"  :disabled="true"
						:placeholder="'提现手续费'+service_charge+'%'" />
				</view>
				<!-- <view class="ikz-drawal-tips">
					提现手续费{{service_charge}}%
				</view> -->
				<view class="ikz-drawal-btn" @click="submitStatus">
					申请提现
				</view>
			</view>
		</view>
		<view class="ikz-drawal-detail" @click.stop="close" v-if="submit_status== 3">
			<view class="ikz-drawal-detail-item" >                                                          
				<view class="ikz-drawal-detail-title">
					提现
				</view>
				<view class="ikz-drawal-detail-price">
					￥{{amount_other}}
				</view>
				<view class="ikz-drawal-detail-box">
					<view class="ikz-drawal-detail-box-title">
						服务费
					</view>
					<view class="ikz-drawal-detail-box-price">
						￥ {{service_charge_price}}
					</view>
				</view>
				<view class="ikz-drawal-detail-box">
					<view class="ikz-drawal-detail-box-title">
						服务费
					</view>
					<view class="ikz-drawal-detail-box-price">
						{{service_charge}}%（最低￥0.01）
					</view>
				</view>
				<view class="ikz-drawal-detail-btn" @click="submit()">确认</view>
			</view>

		</view>
	</view>
</template>

<script>
	import ikzLoading from '@/pages/Component/Public/Loading/loading.vue';
	var app = getApp();
	import ikz from '@/pages/Common/tools.js';
	export default {
		components: {
			ikzLoading
		},
		data() {
			return {
				adminFontPath: app.globalData.adminFontPath,
				loading_css: {
					display: 'flex',
				},
				bankcardlist: {
					cardNo: undefined,
					name: undefined,
					openBankNm: undefined
				},
				wx:false,
				yl:false,
				amount: '',
				total_price: 0.00,
				status: '',
				submit_status: 2,
				amount_other: '',
				service_charge: 0.1,
				service_charge_price: 0.00,
				min_withdrawal_amount: '0.00',
				withdrawal_pay_method:0,
				code_image:undefined
			}
		},
		onLoad(options) {
			this.status = options.status;
			this.allPrice((res) => {
				this.loading_css.display = 'none';
			});
			this.minPrice();
			
		},
		onShow() {
			this.getCard()
		},
		onPullDownRefresh() {
			this.allPrice((res) => {
				uni.stopPullDownRefresh();
			});
		},
		methods: {
			//获取体现最小金额和提现方式
			minPrice() {
				var path = '/xyb/same/min_withdrawal_amount'
				var data = {}
				ikz.post(path, data, (res) => {
					if (res.data.code) {
						this.min_withdrawal_amount = res.data.data.min_withdrawal_amount || 0;
						this.withdrawal_pay_method = res.data.data.withdrawal_pay_method || 0;
						this.code_image = res.data.data.code_image
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
				});
			},
			addCard() {
				var url = '/pages/Component/Module/Payment/Program/withdrawal/addBankcard/index';
				ikz.nav(url, 'ln');
			},
			updateCard() {
				var that = this
				var id = uni.getStorageSync("bankcardid")
				var name = that.bankcardlist.name;
				var cardNo = that.bankcardlist.cardNo;
				var openBankNm = that.bankcardlist.openBankNm;
				var data = {
					id: id,
					name: name,
					cardNo: cardNo,
					openBankNm: openBankNm,
				};
				var url = '/pages/Component/Module/Payment/Program/withdrawal/updateCard/index';
				ikz.nav(url, 'ln' , data);
			},
			getCard() {
				
					var path = '/xyb/bank/detail';
					var data = {
						
					}
					var that = this
					ikz.get(path, data, (res) => {
						if(res.data.data){
							that.bankcardlist = res.data.data
						}
					});
				
			},
			moneyselect(e){
				if(e.detail.value == wx){
					this.yl=false
				}else{
					this.yl=true
				}
			},
			close() {
				this.submit_status = 2;
			},
			allInput() {
				this.amount = this.total_price;
				this.service_charge_price =( Math.ceil(parseFloat(this.amount).toFixed(2) * parseFloat(this.service_charge / 100) *
					100) / 100).toFixed(2);
				this.amount_other =( parseFloat(this.amount) - parseFloat(this.service_charge_price)).toFixed(2);
			},
			allPrice(fn=()=>{}) {
				if (this.status == 2) {
					var path = '/xyb/user_receive/can_withdrawal_amount'
				} else {
					var path = '/xyb/agent/can_withdrawal_amount'
				}
				var data = {}
				ikz.post(path, data, (res) => {
					if (res.data.code) {
						this.total_price = res.data.data.amount || 0;
						this.service_charge = res.data.data.service_charge || 0;
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
					fn();
				});
			},
			submitStatus() {
			 if(!this.bankcardlist.cardNo && this.withdrawal_pay_method==1){
				 uni.showToast({
				 	title: '请先绑定提现银行卡',
				 	icon: 'none',
				 	duration: 2000
				 });
			 }else{
				if (!this.amount) {
					uni.showToast({
						title: '请输入正确的金额',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				if (parseFloat(this.amount) > parseFloat(this.total_price)) {
					uni.showToast({
						title: '请输入正确的金额',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				if (parseFloat(this.amount) < parseFloat(this.min_withdrawal_amount)) {
					uni.showToast({
						title: '最低提现金额' + this.min_withdrawal_amount + '元',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				
				this.service_charge_price =( Math.ceil(parseFloat(this.amount).toFixed(2) * parseFloat(this.service_charge / 100) *
					100) / 100).toFixed(2);
				this.amount_other =( parseFloat(this.amount) - parseFloat(this.service_charge_price)).toFixed(2);
				this.submit_status = 3; 
			 }	
				
			},
			submitStatuss() {
				if(this.amount==''){
					this.amount_other = ''
				}else{
					this.service_charge_price =( Math.ceil(parseFloat(this.amount).toFixed(2) * parseFloat(this.service_charge / 100) *
						100) / 100).toFixed(2);
					this.amount_other =( parseFloat(this.amount) - parseFloat(this.service_charge_price)).toFixed(2);
				}
			},
			submit() {
				if (!this.amount) {
					uni.showToast({
						title: '请输入正确的金额',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				if (parseFloat(this.amount) > parseFloat(this.total_price)) {
					uni.showToast({
						title: '请输入正确的金额',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				var that = this;
				if (this.status == 2) {
					var path = '/xyb/run_withdrawal_apply/submit'
				} else {
					var path = '/xyb/agent_withdrawal_apply/submit'
				}
				var data = {
					amount: this.amount,
					real_amount: this.amount_other,
				}
				ikz.post(path, data, (res) => {
					if (res.data.code) {
						uni.showToast({
							title: '提现申请成功',
							duration: 2000
						});
						this.amount = ''
						this.amount_other = ''
						setTimeout(function() {
							that.allPrice();
						}, 2000)
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
					that.submit_status = 2;
					// fn();
				});
			},
			goLog() {
				uni.navigateTo({
					url: '../log/index?status=' + this.status
				})
			}
		}
	};
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background: #F3F3F3;
	}

	.ikz-drawal {
		box-sizing: border-box;
		padding: 20rpx 10rpx;
		width: 95%;
		margin: 20rpx auto;
		background: #fff;
		border-radius: 15rpx;
	}

	.ikz-drawal-top {
		box-sizing: border-box;
		padding: 50rpx 60rpx;
		width: 95%;
		margin: 0 auto;
		color: #fff;
		height: 250rpx;
	}

	.ikz-drawal-top-title {
		font-size: 40rpx;
	}

	.ikz-drawal-top-tips {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ikz-drawal-top-price {
		font-weight: 600;
		font-size: 50rpx;
	}

	.ikz-drawal-top-bottom {
		height: 20rpx;
		width: 80%;
		margin: 0 auto;
		background: #FFF1E9;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
	}

	.ikz-drawal-center {
		width: 90%;
		margin: 0 auto;
	}

	.ikz-drawal-title {
		margin-top: 50rpx;
	}

	.ikz-drawal-option {
		box-sizing: border-box;
		padding: 20rpx 0px;
		margin-top: 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
	}
	
	.ikz-drawal-options {
		box-sizing: border-box;
		padding: 20rpx 0px;
		margin-top: 15rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
	}

	.ikz-drawal-option-icon {
		font-size: 40rpx;
	}

	.ikz-drawal-option-input {
		font-size: 35rpx;
	}
	
	.ikz-drawal-option-inputs {
		margin-left: 40rpx;
		font-size: 35rpx;
	}
	
	
	.ikz-drawal-option-all {
		font-size: 28rpx;
		color: #F0AD4E;
	}

	.ikz-drawal-tips {
		width: 100%;
		text-align: center;
		font-size: 26rpx;
		margin-top: 15rpx;
	}

	.ikz-drawal-btn {
		width: 90%;
		margin: 50rpx auto 20rpx;
		line-height: 100rpx;
		background: linear-gradient(to right, #FBAB7E, #F8C66D);
		text-align: center;
		border-radius: 50rpx;
		color: #fff;
	}

	.ikz-drawal-btns {
		width: 100%;
		margin: 50rpx auto 20rpx;
		line-height: 100rpx;
		background: #FFF8F2;
		text-align: center;
		color: #FBAC7D;
	}

	.ikz-drawal-texts {
		width: 100%;
		margin: 50rpx auto 20rpx;
		background: #FAFAFA;
	}

	.card-list {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
	}

	.bankcardcontent {
		font-size: 30rpx;
	}

	.bankcardcardNo {
		padding-top: 16rpx;
		font-size: 32rpx;
		color: #FBAC7D;
	}

	.bankcardchange {
		padding-left: 32rpx;
		height: 112rpx;
		line-height: 112rpx;
		font-size: 28rpx;
		color: #FF5959;
		white-space: nowrap;
		border-left: 1px solid #EFEFEF;
	}

	/* 确认框 */
	.ikz-drawal-detail {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.6);
		z-index: 999;
	}

	.ikz-drawal-detail-item {
		box-sizing: border-box;
		padding: 40rpx;
		width: 80%;
		margin: 0 auto;
		background: #fff;
		border-radius: 25rpx;
		overflow: hidden;
	}

	.ikz-drawal-detail-title {
		text-align: center;
		line-height: 80rpx;
	}

	.ikz-drawal-detail-price {
		text-align: center;
		line-height: 60rpx;
		font-size: 40rpx;
		font-weight: 600;
		border-bottom: 1px solid #eee;
		padding-bottom: 30rpx;
	}

	.ikz-drawal-detail-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.ikz-drawal-detail-box-title {
		color: #888;
	}

	.ikz-drawal-detail-btn {
		width: 90%;
		margin: 30rpx auto 0px;
		background-color: #FB9B0A;
		color: #fff;
		border-radius: 50rpx;
		line-height: 80rpx;
		text-align: center;
	}
</style>